<template>
  <div class="dict-management">
    <el-card class="box-card">
      <!-- <template #header>
        <div class="card-header">
          <span><i class="el-icon-notebook-2"></i> 字典管理</span>
        </div>
      </template> -->

      <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
        <el-tab-pane label="字典类型" name="type">
          <DictTypeManage />
        </el-tab-pane>
        <el-tab-pane label="字典数据" name="data">
          <DictDataManage :itemkey="typeof route.query.rand === 'string' ? route.query.rand : undefined" :dictType="typeof route.query.dictType === 'string' ? route.query.dictType : undefined" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script setup lang="ts">
// 确保组件有名称，以便 keep-alive 能识别
defineOptions({
  name: 'DictType' // 与路由配置中的 name 一致
})

import { ref, onMounted,watch } from 'vue'
import { useRoute } from 'vue-router'
import DictTypeManage from '@/components/DictTypeManage.vue'
import DictDataManage from '@/components/DictDataManage.vue'

const route = useRoute()
const activeTab = ref('type')

const handleTabChange = (name: string) => {
  console.log('切换到标签:', name)
}

// 监听路由变化
watch(
  () => route.query,
  (newQuery) => {
    if (newQuery && newQuery.dictType) {
      activeTab.value = 'data'
    }
  },
  { immediate: true }
)

onMounted(() => {
  if((route.query)&&route.query.dictType){
    activeTab.value = 'data'
  }
})


</script>

<style scoped lang="scss">
.dict-management {
  padding: 0px;

  .box-card {
    min-height: calc(100vh - 100px);
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;

    .el-icon-notebook-2 {
      margin-right: 8px;
    }
  }

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
}
</style>